<script setup>
import { VueDraggable } from 'vue-draggable-plus'
import NowSoilMoistureContent from '@/components/NowSoilMoistureContent.vue'
import NowSoilTemperature from '@/components/NowSoilTemperature.vue'
import NowSoilConductivity from '@/components/NowSoilConductivity.vue'
import NowSoilPH from '@/components/NowSoilPH.vue'
import NowSoilNPK from '@/components/NowSoilNPK.vue'
import NowAirTemperature from '@/components/NowAirTemperature.vue'
import NowAirRelativeHumidity from '@/components/NowAirRelativeHumidity.vue'
import NowIlluminance from '@/components/NowIlluminance.vue'
import NowCarbonDioxideConcentration from '@/components/NowCarbonDioxideConcentration.vue'
import NPKHistory from '@/components/NPKHistory.vue'
import CarbonDioxdeHistory from '@/components/CarbonDioxdeHistory.vue'
import SoilPHHistory from '@/components/SoilPHHistory.vue'
import SoilTemperatureHistory from '@/components/SoilTemperatureHistory.vue'

import {ref, watch} from "vue";
import axios from 'axios';
import {ElMessage, ElPopover} from 'element-plus';

import EZUIKit from 'ezuikit-js';
// const UIKitDEMO = new EZUIKit.EZUIKitPlayer({
//   id: `ezuikitplayer`,
//   url: 'ezopen://open.ys7.com/AB9831218/1.hd.live',
//   accessToken: 'ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns'
// })
const cameraModel = ref(true);
const setCameraModel = () => {
  cameraModel.value = !cameraModel.value;
}

const pageModel = ref(false);
const setPageModel = (value) => {
  pageModel.value = value;
}

const userModel = ref(false);
const setUserModel = () => {
  userModel.value = !userModel.value;
}

const userIfo = ref({
  username: '',
  password: ''
})

const username = ref('');
const password = ref('');

import {useCounterStore} from '@/stores/counter.ts'
import {storeToRefs} from 'pinia';
import {Timer} from "@vicons/carbon";
const counterStore = useCounterStore();
const {
  token,
  nowData,
  refreshFlag,

} = storeToRefs(counterStore)
const{
  getNowData,
  getHistoryData
} = counterStore

const login = async () => {
  try {
    const res = await axios.post('/api/user/login', null, {params: userIfo.value})
    token.value = res.data.token
    console.log(token.value)
    setCamera("AB9831171")
    ElMessage.success("登录成功，将在3秒后跳转")
    getHistoryData("327061430532576245")
    getHistoryData("327061430532576244")
    getHistoryData("327061430532576243")
    getHistoryData("327061430532576242")
    getHistoryData("327061430532576241")
    getHistoryData("327061430532576250")
    getNowData()
    setTimeout(() => {setPageModel(true)
    }, 3000)
  } catch (error) {
    console.log(error)
    ElMessage.error("登录失败")
  }
}

const register = async () => {
  try {
    const res = await axios.post('/api/user/register', null, {params: userIfo.value})
    setUserModel()
    ElMessage.success("注册成功")
  } catch (error) {
    console.log(error)
    ElMessage.error("注册失败")
  }
}

const imgUrl = ref('');
const cameraDeviceId = ref('');
const setCamera = async (deviceId) => {
  try {
    const res = await axios.get('/api/data/camera-device',{params: {deviceSerial: deviceId, channelNo: "1", quality: "3"}, headers: { 'Authorization': token.value }})
    imgUrl.value = res.data.imgUrl
    cameraDeviceId.value = deviceId
  } catch (error) {
    console.log(error)
    ElMessage.error("图片加载失败")
  }
}

const autoRun = () => {
  setInterval(() => {
    if (pageModel.value){
      console.log("定时刷新")
      getNowData()
      getHistoryData("327061430532576245")
      getHistoryData("327061430532576244")
      getHistoryData("327061430532576243")
      getHistoryData("327061430532576242")
      getHistoryData("327061430532576241")
      getHistoryData("327061430532576250")
      setTimeout(() =>{refreshFlag.value = !refreshFlag.value}, 500)
    }
  },60000)


}
autoRun()

const autoCameraRun = () => {
  let n = 1
  setInterval(() => {
    if (pageModel.value){
      if (n === 1){
        setTimeout(()=>{
          setCamera(cameraDeviceId.value)
        }, 50000)
      }
      else{
        setCamera(cameraDeviceId.value)
      }
      n = n+1
    }
  },60000)
}
autoCameraRun()


watch(pageModel,(newValue) => {
  setTimeout(() =>{refreshFlag.value = !refreshFlag.value}, 1000)
})
</script>

<template>
  <n-flex vertical>
    <n-layout>
      <n-layout-header
          style="height: 15vh; width: 100vw"
      >
        <div style="height: 7vh; width: 100vw;
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

        align-items: center;display: flex;">
          <div style="font-size: larger;font-weight: bold;margin-left: 40vw;">智能大棚监测系统</div>
          <div style="font-size: 5vh;font-weight: bold;margin-left: 45vw;"
          @click="setPageModel(false)"
          ><el-icon><UserFilled /></el-icon></div>

        </div>
      </n-layout-header>
      <n-layout-content
          content-style="padding: 24px;"
          style="height: 88vh; width: 100vw"
      >

        <vue-draggable
            v-if="pageModel"
            :cols="4"
            style="height: 88vh; width: 100vw;
            background-color: #85FFBD;
            background-image: linear-gradient(249deg, #85FFBD 0%, #FFFB7D 100%);
            position: relative;"
        >
          <div class="svgTest" style="position: fixed; bottom: 4vh; left: 0; z-index: 0; pointer-events: none;">
            <img src="./assets/svg.png" alt="" style="width: 100%; height: 100%;object-fit: cover">
          </div>

          <div
              class="nowCard"
              style="width: 5.5vw"
          >
            <now-soil-temperature style="position: absolute;"></now-soil-temperature>
            <div style="position: absolute;top:14.5vw;font-size: 1.15vw;font-weight: bold;padding: 0.2vw;color: #1a1a1a;">土壤温度</div>
          </div>
          <div
              class="nowCard"
              style="padding: 0.3vw;width: 14vw"
          >
            <div
                style="width: 9vw;height:9vw;
background: rgb(187,255,85);
background: linear-gradient(222deg, rgba(187,255,85,1) 0%, rgba(19,171,0,1) 68%);
                border-radius: 100% 0% 62% 38% / 99% 0% 100% 1% ;
                z-index: 3;
                position: absolute;bottom: 0;right: 0"
            >
            </div>
            <div
                style="width: 4vw;height:4vw;
background: rgb(187,255,85);
background: linear-gradient(222deg, rgba(187,255,85,1) 0%, rgba(19,171,0,1) 68%);
                border-radius: 0% 100% 18% 82% / 0% 82% 18% 100% ;
                z-index: 3;
                position: absolute;bottom: 0;right: 67%"
            >
            </div>

            <now-carbon-dioxide-concentration style="position: absolute;"></now-carbon-dioxide-concentration>
            <now-soil-p-h style="position: absolute;top: 40%;"></now-soil-p-h>

          </div>
          <div
              class="nowCard"
          >
            <now-soil-n-p-k style="position: absolute;"></now-soil-n-p-k>
            <now-soil-moisture-content style="position: absolute;bottom: 20%;left: 10%"></now-soil-moisture-content>

          </div>
          <div
              class="nowCard"
              style="width: 36vw;"
          >

            <div id="ezuikitplayer"
                 v-if="!cameraModel"
            >
            </div>

            <el-image
                style="width: 32vw; height: 18vw;margin-top: 0.5vw;margin-left: 0.5vw;border-radius: 3px;position: absolute"
                :src="imgUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                fit="fill"
                v-if="cameraModel"
            />
            <div
            style="position: absolute;right: 1vw;font-size: 2vw"
            @click="setCameraModel"
            ><el-icon><VideoCamera /></el-icon></div>
            <div
                style="position: absolute;right: 1vw;top:4vw;width: 2vw;height: 2vw;border-radius: 50%;background-color: #4686fd"
                @click="() => {setCamera('AB9831171');ElMessage.success('已切换到摄像头1')}"
            ></div>
            <div
                style="position: absolute;right: 1vw;top:8vw;width: 2vw;height: 2vw;border-radius: 50%;background-color: #44f853"
                @click="() => {setCamera('AC0174303');ElMessage.success('已切换到摄像头2')}"
            ></div>
            <div
                style="position: absolute;right: 1vw;top:12vw;width: 2vw;height: 2vw;border-radius: 50%;background-color: #dbfd46"
                @click="() => {setCamera('AB9831218');ElMessage.success('已切换到摄像头3')}"
            ></div>
            <div
                style="position: absolute;right: 1vw;top:16vw;width: 2vw;height: 2vw;border-radius: 50%;background-color: #fdb446"
                @click="() => {setCamera('L29334649');ElMessage.success('已切换到摄像头4')}"
            ></div>

          </div>
          <div
              class="nowCard"
              style="width: 18vw;"
          >
            <n-p-k-history style="position: absolute;top: 0.5vw;left:0.5vw"></n-p-k-history>
          </div>
          <div
              class="nowCard"
              style="width: 18vw;"
          >
            <soil-p-h-history style="position: absolute;top: 0.5vw;left:0.5vw"></soil-p-h-history>

          </div>
          <div
              class="nowCard"
              style="width: 18vw;"
          >
            <soil-temperature-history style="position: absolute;top: 0.5vw;left:0.5vw"></soil-temperature-history>

          </div>
          <div
              class="nowCard"
              style="width: 18vw;"
          >
            <carbon-dioxde-history style="position: absolute;top: 0.5vw;left:0.5vw"></carbon-dioxde-history>

          </div>

        </vue-draggable>

        <div
            v-if="!pageModel"
            style="height: 88vh; width: 100vw;
            background-color: #85FFBD;
            background-image: linear-gradient(249deg, #85FFBD 0%, #FFFB7D 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;"
        >
          <div
              class="nowCard"
              v-if="!userModel"

              style="position: absolute;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 30vw;
                    height: 30vh;"
          >
            <div>
              注册
            </div>
            <el-input
                v-model="userIfo.username"
                style="width: 240px;margin-top: 5px"
                placeholder="请输入用户名"
            />
            <el-input
                v-model="userIfo.password"
                style="width: 240px;margin-top: 5px"
                type="password"
                placeholder="请输入密码"
                show-password
            />
            <div
            style="margin-top: 5px;justify-content: space-around"
            >
              <el-button type="primary" round @click="register">注册</el-button>
              <el-button type="success" round @click="setUserModel">去登陆</el-button>
            </div>
          </div>
          <div
              class="nowCard"
              v-if="userModel"

              style="position: absolute;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 30vw;
                    height: 30vh;"
          >
            <div>
              登录
            </div>
            <el-input
                v-model="userIfo.username"
                style="width: 240px;margin-top: 5px"
                placeholder="请输入用户名"
            />
            <el-input
                v-model="userIfo.password"
                style="width: 240px;margin-top: 5px"
                type="password"
                placeholder="请输入密码"
                show-password
            />
            <div
                style="margin-top: 5px;justify-content: space-around"
            >
              <el-button type="primary" round @click="login">登录</el-button>
              <el-button type="success" round @click="setUserModel">去注册</el-button>
            </div>
          </div>
        </div>

      </n-layout-content>
      <n-layout-footer
          style="height: 5vh; width: 100vw;z-index: 1000"
      >
        <div style="height: 5vh; width: 100vw;
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        align-items: center;justify-content: center;display: flex;">
          BY 张宇航 课程：软件设计与体系结构
        </div>
      </n-layout-footer>
    </n-layout>
  </n-flex>
</template>

<style scoped>
.nowCard {
  width: 19vw;
  height: 19vw;
  display: inline-block;
  position: relative;
  margin: 0.3vw;
  border-radius: 5px;
  flex-direction: row;

  /* 磨砂玻璃效果 */
  background: linear-gradient(135deg, rgba(89, 200, 248, 0.16), rgba(92, 255, 230, 0.22)); /* 渐变背景 */
  backdrop-filter: blur(10px) contrast(0.85) brightness(1.2); /* 背景模糊增强效果 */
  -webkit-backdrop-filter: blur(10px) contrast(0.85) brightness(1.2); /* 兼容Safari */

  /* 添加玻璃反光效果 */
  position: relative;
  overflow: hidden;
}

.nowCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: screen; /* 加强光感 */
}

.nowCard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.11);
  pointer-events: none;
}

</style>
